<template>
	<view class="flex-center-between u-p-t-20 u-p-b-16">
		<view class="flex">
			<view class="u-radius-8 detail-img clear-flex">
				<x-image :src="showImage(item.imgUrl, 'logo')" preview />
			</view>
			<view class="u-m-l-14 flex-between flex-column">
				<view class="u-f-32 u-lh-44 font-medio">{{ item.title || '' }}</view>
	
				<view class="u-p-b-10">
					<view style="color: #FC2642" class="flex-baseline u-f-40 u-lh-48 font-bold">
						<view class="u-f-26 u-lh-30">{{ lang_unit.money }}</view>
						<view>{{ item.price || 0 }}</view>
					</view>
				</view>
			</view>
		</view>
	
		<view>
			<view class="flex-between">
				<view></view>
				<view>
					<x-common-btn width="138" height="54" fontSize="26"
						@click="jumpUrl(`/pages/user/comerciante/subscribe/save/save?merchantId=${merchantId}&merchantServiceId=${item.merchantServiceId}`)">
						{{ lang_common.subscribe }}
					</x-common-btn>
				</view>
			</view>
			<view class="u-m-t-22 color-grew">
				{{ lang_common.subscribed }}：{{ item.reverseCount || 0 }}{{ lang_unit.ge }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				default: () => ({})
			},
			merchantId: {
				default: ''
			}
		}
	}
</script>

<style scoped lang="scss">
	.detail-img {
		width: 122rpx;
		height: 122rpx;
		border-radius: 8rpx;
		overflow: hidden;
		background-color: #f9f9f9;
	}
</style>